<template>
	<el-dialog v-model="props.isShow" width="26%" close-icon="CloseBold" @close="close">
		<template #header>
			<div class="text-18px font-bold">
				语言切换
			</div>
		</template>
		<div class="mb-20px">
			<div>
				<div>
					<div v-for="(item,index) in languages" :key="index" class="flex items-center mt-10px cursor-pointer" @click="changeLanguage(item)">
						<div class="rounded-50% border-1px border-1px border-solid border-#B5B5B5 w-20px h-20px box-border mr-10px">
							<img src="/icons/radio-selected.svg" class="w-full h-full" v-show="(item.value == radio1)" />
						</div>
						<p class="text-16px text-[#0A1629]">{{ item.title }}</p>
					</div>
				</div>
			</div>
			<div class="mt-60px">
				<el-button color="#114CEE" style="font-size:18px;width:100%;height:50px;" @click="confirm()"> 确定
				</el-button>
			</div>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';

interface IProps {
	isShow: boolean
}
const props = defineProps<IProps>();

const emits = defineEmits(['close', 'confirm'])

const radio1 = ref<string>('en');
const languages = ref<any[]>([
	{
		title:'English',
		value:'en'
	},
	{
		title:'中文',
		value:'zh'
	},
	{
		title:'Tiếng Việt',
		value:'Tiếng Việt'
	},
	{
		title:'Русский',
		value:'Русский'
	}
]);

const changeLanguage = (val: any) => {
	radio1.value = val.value;
}
const close = () => {
	emits('close', false)
}

const confirm = () => {
	emits('confirm')
}
</script>
<style lang="scss" scoped>


</style>
